<template>
  <h1>{{sum}}</h1>
  <button @click="sum+=1">sum++</button>
  <h1>{{msg2}}</h1>
  <button @click="msg2+='scsa'">msg2Change</button>
  <h1>{{person.age}}</h1>
  <button @click="person.age++">age++</button>
  <h1>{{person.job.j1.salary}}K</h1>
  <button @click="person.job.j1.salary++">age++</button>
</template>

<script>
// https://www.bilibili.com/video/BV1Zy4y1K7SH?p=149&spm_id_from=pageDriver&vd_source=cd7c05823c8e4a5b7a5754b7ad8fe5de

//2022 09 04 0:42
//https://www.bilibili.com/video/BV1Zy4y1K7SH?p=150&vd_source=cd7c05823c8e4a5b7a5754b7ad8fe5de
/* 
 setup的两个注意点
    setup执行的时机
    在beforeCreate之前执行一次,this是undefined。
    setup的参数
    props:值为对象，包含:组件外部传递过来，且组件内部声明接收了的属性。
    context: 上下文对象
    attrs:值为对象，包含:组件外部传递过来，但没有在props配置中声明的属性,相当于 this.$attrs .- slots:收到的插槽内容,相当于this.$slots .
    emit:分发自定义事件的函数,相当于this.$emit 。

*/
import { ref,watchEffect,reactive } from "vue";
export default {
  name: "Demo",
  props: {
    msg: {
      type: String,
      default:''
    },
  },
  emits:['hello'],
  setup(props,context) {
    let sum=ref(0);
    let msg2=ref('弹幕66666')
    let person=reactive({
      name:'张三',
      age:99,
      job:{
        j1:{
          salary:20
        }
      }
    })
    watchEffect(()=>{
      //回调中使用到哪个就监视哪个
      const {salary}=person.job.j1
      console.log('salaryChanged',salary);

    })
    return {
      sum,
      msg2,
      person
      }
  },
};
</script>

<style scoped>

</style>